<template>
    <div>
        <h2 align="center">门店修改</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td><input type="text" v-model="quertInfo.shopName" /></td>
                </tr>
                <tr>
                    <td align="right">营业时间</td>
                    <td><input type="date"  v-model="quertInfo.business"/>-<input type="date"  v-model="quertInfo.engtime"/>
                    
                    </td>
                </tr>
                <tr>
                    <td align="right">服务范围</td>
                    <td>
                        <select v-model="quertInfo.scope">
                            <option value="">请选择</option>
                            <option :value="1">早点早餐</option>
                            <option :value="2">下午茶</option>
                            <option :value="3">晚点夜宵</option>
                       
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">店主名称</td>
                    <td><input type="text" v-model="quertInfo.userName"/></td>
                </tr>
                <tr>
                    <td align="right">联系电话</td>
                    <td><input type="text" v-model="quertInfo.phone"/></td>
                </tr>
                <tr>
                    <td align="right">门店介绍</td>
                    <td>
                        <textarea  cols="30" rows="5" v-model="quertInfo.shopDesc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">门店地址</td>
                    <td><input type="text" v-model="quertInfo.addres"/></td>
                </tr>
                <tr>
                    <td align="right">门店状态</td>
                    <td>
                        <input type="radio" name="state" :value="1" v-model="quertInfo.state" />启用
                        <input type="radio" name="state" :value="0" />禁用
                    </td>
                </tr>
                <tr>
                    <td align="right">门店log</td>
                    <td><img :src="quertInfo.photo" alt="" width="100" height="100" />
                        <input type="file" @change="getphoto"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">门店图片</td>
                    <td>
                        <img :src="quertInfo.photoLog" alt="" width="100" height="100" />
                        <input type="file" @change="getphotoLog"/>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="修改" @click="ok" class="btn btn-primary" />
                    
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref, reactive,onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import axios from 'axios';
import moment from 'moment';
let router = useRouter()
let route = useRoute()

//赋值门店
let quertInfo= reactive({
  shopName: "",//门店名称
  addres: "",//门店地址
  photo: "",//门店图片
  scope: "",//服务范围
  userName: "",//店主
  photoLog: "",
  shopDesc: "",//门店介绍
  state: 1,//门店状态
  phone: "",//门店电话
  business: "",//营业时间
  engtime: "",//营业时间结束时间
  id:route.query.id,//门店id
})
//门店Log上传
const getphoto = (e:any)=>{
    let file = e.target.files[0]
    let formdata= new FormData();
    formdata.append("file",file)
    axios({
        url:"/api/Photo/GetPhoto",
        method:"post",
        data:formdata
    })
    .then((res)=>{
        console.log(res)
        quertInfo.photo = res.data
    })
    .catch((err)=>{
        console.log(err)
    })
}
//图片上传
const getphotoLog = (e:any)=>{
    let file = e.target.files[0]
    let formdata= new FormData();
    formdata.append("file",file)
    axios({
        url:"/api/Photo/GetPhoto",
        method:"post",
        data:formdata
    })
    .then((res)=>{
        console.log(res)
        quertInfo.photoLog = res.data
    })
    .catch((err)=>{
        console.log(err)
    })
}
onMounted(()=>{
    getFantian();
})
const getFantian = ()=>{
    axios({
        url:"/api/Shop/GetShopId",
        method:"get",
        params:{
            id:route.query.id, 
        }
    })
    .then((res)=>{
        console.log(res)
        quertInfo.shopName= res.data.shopName;
        quertInfo.addres= res.data.addres;
        quertInfo.photo= res.data.photo;
        quertInfo.photoLog= res.data.photoLog;
        quertInfo.scope= res.data.scope;
        quertInfo.userName= res.data.userName;
        quertInfo.shopDesc= res.data.shopDesc;
        quertInfo.state= res.data.state;
        quertInfo.phone= res.data.phone;
        quertInfo.business= moment(res.data.business).format("YYYY-MM-DD");
        quertInfo.engtime= moment(res.data.engtime).format("YYYY-MM-DD");
     
    })
}
//门店修改
const ok = ()=>{
    if(quertInfo.shopName == ""){
        alert("请输入门店名称")
        return;
    }
    if(quertInfo.addres == ""){
        alert("请输入门店地址")
        return;
    }
    if(quertInfo.photo == ""){
        alert("请上传门店图片")
        return;
    }
    if(quertInfo.scope == ""){
        alert("请选择服务范围")
        return;
    }
    if(quertInfo.userName == ""){
        alert("请输入店主姓名")
        return;
    }
    if(quertInfo.shopDesc == ""){
        alert("请输入门店介绍")
        return;
    }
    if(quertInfo.phone == ""){
        alert("请输入门店电话")
        return;
    }
    if(quertInfo.business == ""){
        alert("请输入营业时间")
        return;
    }
    axios({
        url:"/api/Shop/ShopUpdate",
        method:"put",
        data:quertInfo
    })
    .then((res)=>{
        console.log(res)
        if(res.data == 1){
            alert("修改成功")
            router.push("/ShopList")
        }
        else if(res.data == -1){
            alert("该门店已存在")
            return;
        }
        else{
            alert("修改失败")
        }
    })
    .catch((err)=>{
        console.log(err)
    })
}
</script>

<style scoped>

</style>